oa.view.rf.numberRay = {
/**
*
*Render the structure of an equation with the help of a number ray
*
*@author Bogdan Duca
*@param {ArithmeticProblem} ap An arithmetic problem
*
*/

render: function( ap) {
  var el = {};
  var rB = document.getElementById("renderBox");
  var apDivEl = document.createElement("div");
  var gNode = {}; //created a variable for later adding nodes to it,in special the g node from SVG
  var svgNode = svg.createSVGNode(950, 80); //creating a new svg node, and for it giving the width and height of the view Box, the width and height will be ....
  //attributes for arrow which will be a number ray
  var arrowHeadWidth = 15,
	  arrowHeadHeight = 20,
	  rectangleWidth = 900,
	  rectangleHeight = 4,
	  rectangleColor = "black",
	  arrowHeadColor = "black",
	  xArrow = 0,
      yArrow = 65;
  svgNode.setAttribute("class","operand");
  svgNode.setAttribute("id","SvgNode");
  var numberRayNode = svg.createArrowNode(xArrow,yArrow,rectangleWidth,rectangleHeight,arrowHeadWidth,arrowHeadHeight,rectangleColor,arrowHeadColor); //creating the number ray
  
  numberRayNode.setAttribute("id","numberRay"); //adding an id, which is esential for representing the exercise
  svgNode.appendChild(numberRayNode); //added the number ray to the svg
  el = document.createElement("form");
  el.setAttribute("autocomplete", "off");
  el.setAttribute("novalidate", "novalidate");
  el.appendChild( apDivEl);
  apDivEl.appendChild(svgNode);  //added the svg to the div containing the arithmetic problem
  gNode = svg.createGNode(); //creating a new g node,it make use of the library
  gNode.setAttribute("id","gText"); //setting the attribute,this node is for text and the segments of the number ray
  svgNode.appendChild(gNode); //added to the svg
  rB.appendChild( el);
  apDivEl.setAttribute("id", "arithmeticProblem");
  apDivEl.setAttribute("data-nmrofops", ap.type.operators.length);
  
  // operand 1
  if (ap.type.askedFor === 1) {
    el = document.createElement("input");
    el.setAttribute("type", "number");
    el.classList.add("operand");
    el.classList.add("askedFor");
    el.setAttribute("name", "operand1");
    el.setAttribute("id", "askedFor");
    apDivEl.appendChild( el);	
  }
  
  else {
	/*-----------------THE ARROW #1-----------------------*/
	gNode = svg.createGNode();  //creates the container g for the first operand
	gNode.setAttribute("id","g1"); //set the id g1 
	svgNode.appendChild(gNode); //added to the svg 
  }
  // further operator-operand pairs
  for (var i=2; i <= ap.operands.length; i++) {
  // operand 
    if (ap.type.askedFor === i) {
	  el = document.createElement("input");
      el.setAttribute("type", "number");
      el.classList.add("operand");
      el.classList.add("askedFor");
      el.setAttribute("name", "operand"+i);
      el.setAttribute("id", "askedFor");
    }
    else {
       /*----------------- THE ARROW #i -----------------------*/
		gNode = svg.createGNode(); //creates the container g for other operands
		gNode.setAttribute("id","g"+i); //set id by adding to the name g an iterator so we can later loop between them
		svgNode.appendChild(gNode); //adds the node to the svg
     }
  }
  // equality symbol
  el = document.createElement("span");
  el.setAttribute("class", "operator");
  el.setAttribute("id", "equalitySymbol");
  apDivEl.appendChild( el);
  el.innerHTML = "=";
  // result
  if (ap.type.askedFor === 0) {
    el = document.createElement("input");
    el.setAttribute("type", "number");
    el.classList.add("operand");
    el.classList.add("askedFor");
    el.setAttribute("name", "result");
    el.setAttribute("id", "askedFor");
    apDivEl.appendChild( el);
  }
  else {
    el = document.createElement("span");
    el.setAttribute("class", "operand");
    el.setAttribute("id", "result");
    apDivEl.appendChild( el);
  }
  // configure the input field
  el = document.getElementById("askedFor");
  el.setAttribute("autofocus", "autofocus");
  el.addEventListener("input", oa.view.handleUserInputEvents, false);
  el.focus();
  // configure the submit/continue button
  el = document.createElement("button");
  el.setAttribute("type", "button");
  el.setAttribute("id", "submitButton");
  el.className = "blue";
  el.innerHTML = "?";
  apDivEl.appendChild( el);
  el.addEventListener("click", oa.view.handleClickSubmitButtonEvents, false);
  document.addEventListener("keypress", oa.view.handleKeyPressEvents, true);
},

/**
*Fill an already rendered problem equation with new values for number ray  and result
*
*@author Bogdan Duca
*@param {ArithmeticProblem} ap An arithmetic problem.
*
*/
fill: function( ap) {
  var askedFor = document.getElementById("askedFor");
  var numberRay = document.getElementById("numberRay"); //retrieves the element which has the numer ray
  var numberRayWidth = util.findNodeInNodeList( numberRay,"rect").getAttribute("width");  //parsedString[2]-parsedString[0];//calculates the width of the ray, in this case because it is build with the help of the path from SVG
  var gTextNode = document.getElementById("gText");  //retrieves the g node which will contain the text and the segments from the ray
  var originalX = 0; //the x of the number Ray, for orientating the draw on and above the number ray. orientating x
  var originalY = 65; // the y of the number Ray, orientating y
  var currentX = originalX; //it modifies during the filling, so that we don't modify the orienntating y
  var gNode={};  // for retrieving element(in special they are gNode) and applying some modifications to them
  var maxSegments; // variable to establish later the maximum number of segments
  var arrowHeadWidth = 15,   
	  arrowHeadHeight = 20,
	  rectangleWidth = 0,
	  rectangleHeight = 8,
	  rectangleColor = "darkblue",
	  arrowHeadColor = "darkblue",
	  xArrow = originalX,
	  yArrow = originalY-(rectangleHeight/2)-30;
  // unitMeasure is calculate from the width of the svg,it is presumed that the svg width is the same as path for the number ray
  var unitMeasure = numberRayWidth / (ap.result+1); //calculates the unit measure for the visual segments
  askedFor.value = ""; 
  askedFor.focus();
  // removes the children of the node
  dom.removeChildNodes(gTextNode);
  // creates the segments and the numbers on the numberRay
  maxSegments = util.getMaxFromArray(ap.operands);
  // the unit measure is calculated taking in consideration which is higher( one of the operands or the result)
  unitMeasure =(ap.result>maxSegments)?(numberRayWidth/(ap.result+1)):(numberRayWidth/(maxSegments+1));
  // calcutes the maximum segments. this different from subtraction and adition. in the subtraction case it may be just the bigger operand plus 1. and 
  // for the adition is the result plus 1
  max =(ap.result>maxSegments)?(ap.result+1):(maxSegments+1);
  // creates the text for the node and segments.If the result or operands are bigger than 5 we show only multiples of 5 number on the segments
  // if not we show the hole numbers from 1 to 5
  if(max <= 5){ 
	  for( var i=0; i<=max; i+=1)
		{
		 gTextNode.appendChild(svg.createTextPathNode(currentX,55,currentX,75,"black",3,"none",currentX,100,i,25,"black"));
		 currentX+=unitMeasure;   //increases the currentX with a new value(adding a unitMeasure)
		}
	}
	else{
	   for( var i=0; i<=max; i+=1)
			{
			if( i % 5 !== 0 ){
				gTextNode.appendChild(svg.createTextPathNode(currentX,55,currentX,75,"darkgray",3,"none",currentX,100,i<=2?i:"",25,"gray"));
				currentX+=unitMeasure;   //increases the currentX with a new value(adding a unitMeasure)
			} else {
				gTextNode.appendChild(svg.createTextPathNode(currentX,55,currentX,75,"black",3,"none",currentX,100,i,25,"black"));
				currentX+=unitMeasure;   //increases the currentX with a new value(adding a unitMeasure)
				}
			}
		}
  gNode = document.getElementById("g1"); //retrieves the first operand
  dom.removeChildNodes( gNode);  //removes all the children
  // this is for the first operand always,is created except for the cases when it is 0
  if( ap.operands[0] !== 0){  
  		rectangleWidth = unitMeasure*ap.operands[0] - arrowHeadWidth; // calculates the rectangle's width
		yArrow = yArrow - rectangleHeight-20; // calculates the position y of the arrow, 20 is the height from the numberRay
		// here he have 2 operations in one, we first create the desired arrow and then is appended as a child to the selected g node
		gNode.appendChild( svg.createArrowNode(xArrow,yArrow,rectangleWidth,rectangleHeight,arrowHeadWidth,arrowHeadHeight,rectangleColor,arrowHeadColor));
		gNode.appendChild( svg.createTextNode(xArrow+(rectangleWidth+arrowHeadWidth)/2,yArrow-10,ap.operands[0],30,"darkblue"));
		xArrow = xArrow+rectangleWidth+arrowHeadWidth; // the x for the next arrow is increased by adding to the old value the width of the body and the head of the arrow
	  }
  // if other operands exist than the same operations is done as for the first operand
  for( var i = 2,max = ap.operands.length; i<= max ;i++)
	{
		// changing first the colors of the second arrow
		rectangleColor = "darkgreen";
		arrowHeadColor = "darkgreen";
		if( ap.operands[i-1] !== 0){  // verify if the operand is 0 or not
			var gNode = document.getElementById("g"+i); //retrieves the node
			dom.removeChildNodes(gNode); // removes all the children of the node
			yArrow = (xArrow===originalX)?(yArrow - rectangleHeight-20):yArrow; //this defines the value for y for the case where the first operand is null, by verifing if the xArrow is modified or not
			rectangleWidth = unitMeasure*ap.operands[i-1]-arrowHeadWidth; //the new rectangle width will be calculated from multipling the unitMeasure with the number shown from ap.operands-minus  the width of arrow head
			if( oa.view.operatorSymbols[ ap.type.operators[i-2]-1]==="+") //verify what kind of operations we have, addition or subtraction
				{
					gNode.appendChild( svg.createArrowNode(xArrow,yArrow,rectangleWidth,rectangleHeight,arrowHeadWidth,arrowHeadHeight,rectangleColor,arrowHeadColor));
					// adding the operand on the arrow
					gNode.appendChild( svg.createTextNode(xArrow+(rectangleWidth+arrowHeadWidth)/2,yArrow-10,oa.view.operatorSymbols[ ap.type.operators[i-2]-1]+" "+ap.operands[i-1],30,"darkgreen"));
				} else {
					// for the subtraction we need to rotate the array 180. here we make use of transform property of g node
					// first we initialise the rotation x and y with 0 and then we calculate them the middle of the arrow 
					// also the x and y for the arrow should start from the beginning of the earlier arrow and then go to the opposite direction
					var rotateX=0, rotateY=0, el={};
					xArrow = xArrow - ( rectangleWidth+arrowHeadWidth); //the current x is calculatet by subtract from where the new arrow will supose to be, the width of the entire arrow
					yArrow = yArrow+rectangleHeight+4; //also because the arrow is below we increase the y and in the case that they are not just one next to each other we add between them 4 px
					rotateX = xArrow+( rectangleWidth+arrowHeadWidth)/2;  //center x of the arrow 
					rotateY = yArrow +rectangleHeight/2; //center y of the arrow for rotating the arrow 180 degrees in the center point
					el = svg.createArrowNode(xArrow,yArrow,rectangleWidth,rectangleHeight,arrowHeadWidth,arrowHeadHeight,rectangleColor,arrowHeadColor);
					el.setAttribute("transform","rotate(180 "+rotateX+" "+rotateY+")");
					// adding the operand on the arrow
					gNode.appendChild( svg.createTextNode(rotateX,rotateY+arrowHeadHeight*1.5,oa.view.operatorSymbols[ ap.type.operators[i-2]-1]+" "+ap.operands[i-1],30,"darkgreen"));
					gNode.appendChild( el);
				}
		   xArrow = xArrow+rectangleWidth+arrowHeadWidth; //again increase the new x for arrow
		}	
 	}
  // result
  if ( ap.type.askedFor !== 0) { document.getElementById("result").innerHTML = ap.result; }
 }
};